<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Sequence</title>
	<script src="lib/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
	<!--script src="lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript" charset="utf-8"></script-->
	

	<script src="lib/raphael-min2.js" type="text/javascript" charset="utf-8"></script>
	<script src="src/sequence.js" type="text/javascript" charset="utf-8"></script>
	<script src="src/actor.js" type="text/javascript" charset="utf-8"></script>
	
	<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="css/sequence.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script type="text/javascript" charset="utf-8">
	$(function () {

		var width = $('#page').width(),
				height = $('#page').height(),
				canvas = Raphael('page', width, height);
		
		$('.comic').hide();
		$('.comic').each(function (index, el) {
			var id = $(this).attr('id');
			$('#links').append('<p><a href="#' + id + '" class="comic_link">' + id + '</a>');
		});
		$('.comic_link').click(function () {
			drawInput(canvas, width, height, $($(this).attr('href')).html(), $('#coord'));
			return false;
		});
		
		
		$('#svg_save').click(function () {
			var content = $('#page').html();
			content = content.replace(/href/g, 'xlink:href');
			content = content.replace(/<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"')
			var uriContent = "data:image/svg+xml," + encodeURIComponent(content);
			var newWindow=window.open(uriContent, 'saved.sv');
		});
		
		drawInput(canvas, width, height, $('#leader-ring-sync-1').html(), $('#coord'));
		
	});

	</script>

</head>

<body id="sequence" onload="">
	<div id="page">
	</div>
	<div id="links">
		
	</div>
	
	<div id="leader-ring-sync-2" class="comic">
			define h1 circle Orange beam 15 40
			define h2 circle cyan beam 15 80
			define h3 circle Yellow beam 55 90
			define h4 circle lime beam 85 60
			define h5 circle #F9B7FF beam 55 25

			record ring_topology
			h1 to h2:
					- 0 0, curvy=1, packet=false, acolor=black, astyle=., awidth=1, ahead=false
			h2 to h3:
				- 0 0, curvy=1, angles=-30 180, packet=false, acolor=black, astyle=., awidth=1, ahead=false
			h3 to h4:
				- 0 0, curvy=1, angles=0 -90, packet=false, acolor=black, astyle=., awidth=1, ahead=false
			h4 to h5:
				- 0 0, curvy=1, angles=90 0, packet=false, acolor=black, astyle=., awidth=1, ahead=false
			h5 to h1:
				- 0 0, curvy=1, angles=180 20, packet=false, acolor=black, astyle=., awidth=1, ahead=false
			done

			record ring_ids
			: 7
				- 7 40, type=rect
			: 5
				- 7 80, type=rect
			: 1
				- 50 80, type=rect
			: 4
				- 93 60, type=rect
			: 2
				- 65 20, type=rect

			done

			panel Hirshberg-Sinclair Algorithm
				- type=banner, color=#ccf
			
			
			panel Send ID in both directions..
			hide h1, h2, h4, h5
			h3 to h2: ID
				- 27 58
			h3 to h4: ID
					- 68 47, angles=0 -90
			h3: That was easy!
				- 42 28

			panel .. but only so far
				- width=-20
			hide h1, h2, h4, h5
			: Limit the distance\nthe message can travel
				- 32 33, curvy=20, color=#ffc
			h3: how do I do that?
				- 70 56
			mood h3 what
			
			panel Use TTL to limit distance
				- width=20
			hide h1, h2, h4, h5
			: Send Time-to-Live\n(TTL) along\nwith your ID
				- 24 28, type=none, caps=true
			: TTL is the distance\nyou want the\nmessage to travel
				- 75 28, type=rect, color=#fcc
			h3: An awesome idea!
				- 49 59
			h3 to h2: ID\nTTL = 2 
				- 12 65
			h3 to h4: ID\nTTL = 2
				- 83 51, angles=0 -90
			
			panel
			hide h1, h5
			mood h2 what, h4 what, h3 rolleyes
			h2, h4: what should we do with this TTL?
				- 49 18
			h3 to h2: ID\nTTL = 2 
				- 36 72
			h3 to h4: ID\nTTL = 2
				- 67 70, angles=0 -90

			panel Decrement TTL before forwarding
			move h5 85 20
			mood h3 rolleyes, h1 smile, h5 smile
			h3 to h2: 
				- 36 72
			h3 to h4: 
				- 67 70, angles=0 -90
			h2 to h1: ID\nTTL=1
				- 32 24
			h4 to h5: ID\nTTL=1
				- 63 24
			h2, h4: Ah.. we get it!
		
			panel .. until it reaches zero
			hide h2, h3, h4
			move h5 85 20
			mood h1 what, h5 what
			h2 to h1: ID\nTTL=1
				- 11 85
			h4 to h5: ID\nTTL=1
				- 88 87
			h1, h5: Umm.. excuse us--
				- 46 25
			: -- the TTL\nwill be 0 now
				- 50 50, merge=true
			: what should we do?
				- 50 75, merge=true
			
			panel At furthest point reverse direction
				- width=20
			hide h2, h3, h4
			move h5 85 20
			mood h1 smile, h5 smile
			h2 to h1:
				- 14 60, angles= 180 180, curvy=20
			h1 to h2: ID\n"Reversed"
				- 42 88, angles=0 0, curvy=20, pcolor=red, acolor=red
			h4 to h5:
				- 33 89, angles=0 0, curvy=20
			h5 to h4: ID\n"Reversed"
				- 74 88, angles=180 180, curvy=20, pcolor=red, acolor=red
			: Send the message\nBACK\nto the orignator
				- 49 34, type=none
			
			panel This is what just happened
			h3 to h2:
				- 0 0, angles=180 -90
			h3 to h4:
				- 0 0, angles=0 -90
			h4 to h5:
				- 0 0, angles=90 0
			h2 to h1:
				- 0 0, angles=180 180, curvy=20
			
			h1 to h2:
				- 0 0, angles=0 90, pcolor=red, acolor=red
			h5 to h4:
				- 0 0, angles=-90 120, pcolor=red, acolor=red
			h4 to h3:
				- 0 0, angles=180 60, pcolor=red, acolor=red
			h2 to h3:
				- 0 0, angles=0 120, pcolor=red, acolor=red
			
			: (When TTL was 2)
				- 22 22, type=none
			
			panel Double the distance next time
				- width=-20
			hide h1, h2, h4, h5
			mood h3 sceptic
			h4 to h3:
				- 0 0, angles=-90 0, pcolor=red, acolor=red
			h2 to h3:
				- 0 0, angles=-90 180, pcolor=red, acolor=red
			: I received both 
				- 24 24, type=balloon
			: Now I send the\nmessage twice as far
				- 63 41, merge=true
			h3: I keep on with this..\nUNTIL?
				- 27 65, merge=true
			
			panel When to stop: I
				- width=40
			hide h2, h3, h4, h5
			h2 to h1: ID=4\nTTL=2
				- 10 86, angles=180 180, curvy=20
			h1 to h2: ID=4\nSTOP
				- 44 76, angles=0 0, pcolor=red, acolor=red
			h1: If I have a greater\nID than this message--
				- 60 25
			:  --I send it back right away,\nand ask the sender to stop
				- 72 53, merge=true
			: (even when the\nTTL is not 0)
				- 79 83, merge=true
			
			panel 
				- width=-40
			hide h1, h2, h4, h5
			mood h3 silent
			h4 to h3: ID\nSTOP
				- 72 61, angles=-90 0, pcolor=red, acolor=red
			h3: I will not send\nany more message..
				- 36 24, style=-
			
			panel When to Stop: II
			hide h1, h2, h4, h5
			h4 to h3: ID=4\nTTL=6
				- 82 64, angles=-90 0, pcolor=red, acolor=red
			h3 to h2: ID=4\nTTL=16
				- 12 70, angles=180 -90
			h3: If I get my forward\ndirection message, I stop
				- 40 26
			: AND --
				- 72 44, merge=true
	
			panel
			hide h1, h2, h4, h5
			mood h3 cool
			h4 to h3: ID=4\nTTL=6
				- 82 64, angles=-90 0, pcolor=red, acolor=red
			h3 to h2: ID=4\nTTL=16
				- 12 70, angles=180 -90
			h3: I AM THE LEADER
				- 49 29
			
	</div>
	
	<div id="leader-ring-sync-1" class="comic">
		define h1 circle Orange beam 15 40
		define h2 circle cyan beam 15 80
		define h3 circle Yellow beam 55 90
		define h4 circle lime beam 85 60
		define h5 circle #F9B7FF beam 55 25
		
		record ring_topology
		h1 to h2:
				- 0 0, curvy=1, packet=false, acolor=black, astyle=., awidth=1, ahead=false
		h2 to h3:
			- 0 0, curvy=1, angles=-30 180, packet=false, acolor=black, astyle=., awidth=1, ahead=false
		h3 to h4:
			- 0 0, curvy=1, angles=0 -90, packet=false, acolor=black, astyle=., awidth=1, ahead=false
		h4 to h5:
			- 0 0, curvy=1, angles=90 0, packet=false, acolor=black, astyle=., awidth=1, ahead=false
		h5 to h1:
			- 0 0, curvy=1, angles=180 20, packet=false, acolor=black, astyle=., awidth=1, ahead=false
		done
		
		record ring_ids
		: 7
			- 7 40, type=rect
		: 5
			- 7 80, type=rect
		: 1
			- 50 80, type=rect
		: 4
			- 93 60, type=rect
		: 2
			- 65 20, type=rect

		done
		
		panel
			- clear=true, width=-50, color=#fcc
		: LEADER ELECTION\nIN SYNCHRONOUS\nRING NETWORK
			- 50 50, type=none
		
		panel leader election in ring topology
			- width = 25
		h1, h2, h3, h4, h5: We want to\nelect a LEADER
			- 50 55
		replay ring_topology
		
		
		panel Each player has unique id
			- width = 25
		replay ring_topology
		replay ring_ids
		h1, h2, h3, h4, h5: But we don't know\neach other's IDs!
			- 50 55
		mood h1 sad, h2 sad, h3 sad, h4 sad, h5 sad
		
		panel LeLann, Chang-Roberts Algorithm
			- type=banner, color=#ccf
		
		panel Rule 1
		- clear=true, width=-40, color=#efe
		show h4
		move h4 85 90
		: THOU SHALT SEND\nYOUR ID TO YOUR\nRIGHT NEIGHBOR
			- 50 30, color=#ffc
		h4: That's easy enough!
		 - 31 73
		
		panel Everybody sends their ID to the right
			- width=80
		replay ring_ids
		h1 to h2: 7
				- 24 58, color=#dfd
		h2 to h3: 5
			- 35 74, angles=-30 180, color=#dfd
		h3 to h4: 1
			- 66 68, angles=0 -90, color=#dfd
		h4 to h5: 4
			- 68 41, angles=90 0, color=#dfd
		h5 to h1: 2
			- 40 44, angles=180 20, color=#dfd
		
		panel
			- clear=true, width=-40
		show h4, h3
		move h4 80 70, h3 80 10
		h3 to h4: 1
		 - 94 54, color=#dfd
		hide h3
		mood h4 what
		h4: So now I have this\nID from neighbor --
			- 42 29
		: -- what do I do\nwith it?
			- 25 56, merge=true
		
		panel Rule 2 Part I
		- clear=true, width=-40, color=#efe
		show h4, h3, h2
		move h4 80 70, h3 80 10, h2 60 100
		h3 to h4: 5
		 - 94 54, color=#dfd, angles=0 90
		h4 to h2: 5
			- 84 88, color=#dfd, angles=-90 90
		hide h3, h2
		: IF THE ID THOU\nRECEIVETH IS GREATER\nTHAN THOUST ID --
			- 40 35, color=#ffc
		: -- FORWARD IT!
			- 32 64, color=#ffc, merge = true
		
		panel Rule 2 Part II
		- clear=true, width=-40, color=#efe
		show h4, h3
		move h4 80 70, h3 80 10
		mood h4 silent
		h3 to h4: 1
		 - 94 54, color=#dfd, angles=0 90
		h4 to : 
		hide h3
		: IF IT IS LESSER --
			- 50 25, color=#ffc, type=balloon
		: -- DO NOT SEND\nIT FURTHER!
			- 32 48, color=#ffc, merge = true
		h4: I can do that!
			- 41 88
		
		
		panel After one round
			- width=80
		replay ring_ids
		h1 to :
		h2 to h3: 7 (forward by 5)
			- 35 65, angles=-30 180, color=#dfd
		h3 to h4: 5 (forward by 1)
			- 66 68, angles=0 -90, color=#dfd
	h4 to :
		h5 to h1: 4 (forward by 2)
			- 40 44, angles=180 20, color=#dfd
	h1: dropped 2
		- 11 21
	h4: dropped 1
		- 87 30
	
		panel After two rounds
			- width=80
		replay ring_ids
		h1 to :
		h3 to h4: 7 (forward by 5, 1)
			- 60 68, angles=0 -90, color=#dfd

		h4 to h5: 5 (forward by 4, 1)
			- 47 45, angles=90 0, color=#dfd
		h1: dropped 4
		- 30 20		
		
		panel And so on...
			- width=80
		mood h2 sad, h3 sad, h4 sad, h4 sad, h1 puppyeyes
		h2, h4, h5: We made it\nas far as to 7
			- 76 35
		h3: I was dropped\nnext door
			- 87 85
		h1: I WAS NOT\nDROPPED!
			- 35 34, color=#fee
		: WHAT ABOUT ME ?!?
			- 45 52, merge=true, color=#fee

		
		panel Rule 3
		- clear=true, width=-40, color=#efe
		show h4, h3
		move h4 80 70, h3 80 10
		mood h4 shy
		color h4 Orange
		h3 to h4: 7
		 - 94 54, color=#dfd, angles=0 90
		hide h3
		: IF THOU RECEIVETH\nYOUR OWN ID --
			- 50 25, color=#ffc
		: -- THOU ART\nTHE LEADER!
			- 22 48, color=#ffc, merge = true
		h4: WOOHOO!
			- 41 78
		
		panel
		move h1 50 10, h2 20 90, h3 40 90, h4 60 90, h5 80 90
		mood h1 cool, h2 rolleyes, h3 rolleyes, h4 rolleyes, h5 rolleyes
		: There will ALWAYS be ONE\nplayer whose message will not\nbe dropped by anybody.
			- 50 30, type=none
		: And he will be the LEADER
			- 50 60
		
	</div>
		
	<div class="comic" id="hdfs">
		define c images/computer2.jpg 34 33 100 10 80
		define n images/blade.png 45 20 100 80 40
		define d1 images/blade.png 45 20 100 40 90
		define d2 images/blade.png 45 20 100 60 80
		define d3 images/blade.png 45 20 100 80 90
		define u images/BluePerson.gif 30 30 100 20 70 hidden
		
		panel
			- clear = true, width=120, color=#faa
		: Hadoop\nDistributed\nFile\nSystem\n(HDFS)
			- 50 50, type = none
		
		panel
			- clear=true, width=60, color=#cfc
			: The\nCast
				- 50 50, type=none
		
		panel
			- width = 220
		n: I am NAMENODE.\nI coordinate everything
			- 71 13
		c: I am CLIENT.\nI read/write data
			- 23 30
		d1, d2, d3: We are DATANODES.\nWe store data
			- 60 60
		
		panel
			n: There is only\nONE of me
				- 64 13
			c: People sit in\nfront of me\n(there can be any\nnumber of me)
				- 22 30
			d1, d2, d3: There are MANY of us.\nSometimes even thousands!
				- 60 60
			
		panel Writing Data in HDFS Cluster
			- type=banner, color=#cfc
		
		panel Request from User
		show u
		hide d1 permanent, d2 permanent, d3 permanent, n permanent
		move c 70 88
		u: Please write 200 MB\ndata for me
			- 35 30
		c: Okay. I will see what\nI can do for you. But--
			- 71 55
		
		panel Block and Replication
		show u
		move c 20 78, u 70 88
		c: --are you not\nforgetting\nsomething?
			- 22 35
		u: Ah yes.. please:\na) divide the data\nin 128MB blocks\nb) copy each block\nin three places
			- 73 45
		
		panel
		show u
		move c 20 78, u 70 88
		c: A good client always knows\nthese two things: 
			- 56 18
		: BLOCKSIZE: large file is divided\nin blocks (usually 64 or 128MB)
			- 54 48, type=rect, color=#fc9
		: REPLICATION FACTOR:\nnumber of places each\nblock must be replicated\n(usually 3)
			- 64 81, type=rect, color=#fc9
		
		panel Divide file into blocks
		show n
		move n 41 40
		hide n
		: xxxxxxxxxxx\nxxxxxxxxxxx\nxxxxxxxxxxx\nxxxxxxxxxxx
			- 25 40, type=rect, color=#fcc
		n: xxxxxxxxxxx\nxxxxxxxxxxx\nxxxxxx
			- 79, 45, type=rect, color=#fcc, twidth=1
		n: xxxxxxxxxxx\nxxxxxxxxxxx\nxxxxxx
			- 79, 80, type=rect, color=#fcc, twidth=1
		
		panel Ask Namnode
		show n
		c: I will work on\nthe first block\nfirst
			- 25 40
		c to n: Please help me write\n128MB block with\nreplication 3
			- 71 79
		
		panel
			show n
			n: Need to find 3 datanodes\nfor this guy
				- 37 13
			: How do I do that?\nWill tell you some\nother time
				- 37 44, type=balloon, style=-
			n to c: Here are the addresses\n of three datanodes
				- 70 88
		
		panel Client starts writing data
				show d1 permanent, d2 permanent, d3 permanent
				c: I send my data to\nfirst datanode only
					- 50 32, angle=45
				c to d1:
					- 0 0, angles=90 90, curvy=40
		
		panel
		d1: While I am recieving\ndata, I forward the same\ndata to the next datanode
			- 50 22
		c to d1:
			- 0 0, angles=90 120, curvy=40
		d1 to d2: 
			- 0 0, angles = 90 120, curvy=40
			
		panel
		c to d1:
			- 0 0, angles=90 120, curvy=40
		d1 to d2: 
			- 0 0, angles = 90 120, curvy=40
		d2 to d3:
			- 0 0, angles = 90 90, curvy=40
		d2: I do the same\nwhat previous guy did
			- 30 18
		d3: I am the last\nin chain
			- 80 30
		
		panel TA..DA.. Replication Pipeline
		c to d1:
			- 0 0, angles=90 120, curvy=40
		d1 to d2: 
			- 0 0, angles = 90 120, curvy=40
		d2 to d3:
			- 0 0, angles = 90 90, curvy=40
		
		panel
		hide c
		show n permanent
		: Once all data (for\nthis block) is\nwritten to hard disk
			- 36 24
		d1 to n: Done
			- 24 60, angles=90 180 0
		d2 to n: Me too
			- 32 72, angles=90 225 0
		d3 to n: Me too
			- 90 74, angles=90 -90 90
		
		panel
		hide d1, d2, d3
		n: Block successfully stored\nand replicated in HDFS
			- 30 19, angle=180
		c: And I repeat the same\nsteps with remaining blocks
			- 59 63, angle=0
			
	</div>
	
	<div class="comic" id="dhcp">
		define A images/computer2.jpg 34 33 100 20 30
		define B images/computer2.jpg 34 33 100 10 45
		define C images/computer2.jpg 34 33 100 20 70
		define S images/server.png 64 74 50 80 50
		define T images/server.png 64 74 50 80 24 hidden

		panel 
			- clear = true, width = 140
		: Dynamic\nHost\nConfiguration\nProtocol\n(DHCP)
			- 50 50, type = none
		
	
		panel
			- width = 200
		A, B, C: We are hosts
			- 60 20
		C: I don't have IP Address :(
			- 67 85, angle=0
		: DHCP Server
			- 80 70, type=rect
		
		panel Dhcp discover
		C to S: DHCP_Discover
			- 70 90, angles = 0 180 90
		C to A: DHCP_Discover
			- 70 90, angles = 0 0 90
		C to B: DHCP_Discover
			- 70 90, angles = 0 0 90
		: Broadcast\nin the subnet
			- 60 25
		
		panel
		hide C, S
		A to : 
		B to :
		: All other hosts\nwill ignore the discover packet
			- 52 70
		
		panel
		hide A permanent, B permanent, C
		move S 80 70 permanent
		S: Address Table\n192.168.0.1 (used)\n192.168.0.2 (used)\n192.168.0.3 (free)\n192.168.0.4 (free)\n...
			- 30 50, type = rect, color=#cfc
		S: I need to find\none free address
			- 75 20
		
		
		panel DHCP Offer
		S: Address Table\n192.168.0.3 (offered)
			- 70 20, type=rect, color=#cfc
		S: I will mark\nthe address as "offered"
			- 30 39
		S to C: DHCP_Offer 192.168.0.3
			- 50 90
			
		panel Dhcp request
		show A, B
		C to A:
			- 0 0, angles = 0 0
		C to B:
			- 0 0, angles = 0 0
		C to S: DHCP_Request 192.168.0.3
			- 50 90, angles= 0 180 90
		A to :
		B to :
		: Also Broadcast
			- 70 30

		panel
		hide C
		S: Address Table\n192.168.0.1 (used)\n192.168.0.2 (used)\n192.168.0.3 (USED)\n192.168.0.4 (free)\n...
			- 30 50, type = rect, color=#cfc
		S: One more\naddress used
			- 75 20
		
		panel DHCP Ack
		S: Another happy client!\nI will now start a "lease" timer\nbut more on that some other time
			- 55 35, twidth=20
		S to C: DHCP_Ack 192.168.0.3
			- 50 90, angles = 180 0 90
			
		panel Two DHCP Servers. Client must select one of them
			- type=banner, color=#afa

		
		panel DHCP Discover
		show T permanent
		C to T: DHCP_Discover
			- 70 90
		C to S: DHCP_Discover
			- 70 90, angles=0 180 90
		: Reaches both\nservers
			- 30 30
		
		panel Both select an address each
		hide C
		T: Address Table:\n192.168.0.123 (offered)
			- 35 40, type = rect, color=#cfc
		S: Address Table:\n192.168.0.3 (offered)
			- 35 70, type = rect, color=#cfc
			
		panel Two offers to the client
		T to C: DHCP_Offer\n192.168.0.123
			- 25 30, angles=180 30 0
		S to C: DHCP_Offer\n192.168.0.3
			- 55 90, angles=180 -30 90

		panel Client selects one address
		C: I select\n192.168.0.3
			- 20 35
		C to T: DHCP_Request 192.168.0.3
			- 60 90, angles=20 180 90
		C to S: DHCP_Request 192.168.0.3
			- 60 90, angles=-20 180 90
		
		panel
		hide C
		T: I will put the address\nback in free pool
			- 28 15, angle=180
		: Address Table:\n192.168.0.123 (FREE)
			- 41 33, type = rect, color=#cfc, angle=180
		S: I will mark the address\nas used
			- 33 68, angle=180
		: Address Table:\n192.168.0.3 (USED)
			- 41 87, type = rect, color=#cfc, angle=180
		
		panel
		S to C: DHCP_Ack 192.168.0.3
			- 50 90, angles=180 0 90
done		


		say('T', 'Address Table:\n192.168.0.123 (FREE)', 
			35, 20, {type: 'rect', angles: [0, 180]});
		say('S', 'Address Table:\n192.168.0.3 (USED)', 
			35, 50, {type: 'rect', angles: [0, 180]});
		send('S', "C", "DHCP_Ack 192.168.0.3", 70, 90, {angles: [180, 0, 90]});

	</div>
	

	<button id="svg_save">Open as SVG file in new window</button>
	<br>
	<input type="text" name="coord" value="" id="coord">
	
</body>
</html>